<template>
  <div>
    <!-- <h4>提现管理</h4> -->
    <Row>
      <span style="font-weight:800">申请时间：</span>
      <DatePicker v-model="selectDate"
                  type="daterange"
                  format="yyyy-MM-dd"
                  clearable
                  @on-change="selectDateRange"
                  placeholder="请选择时间范围"
                  style="width: 200px"></DatePicker>
      <Select v-model="searchForm.filter.status"
              @on-change="handleState"
              style="width:200px;margin-left:20px"
              placeholder="选择状态">
        <Option v-for="item in level"
                :value="item.value"
                :key="item.value">
          {{ item.label }}
        </Option>
      </Select>

      <Input v-model="searchForm.nickname"
             placeholder="请输入昵称"
             @keydown.enter.native="handleSearch"
             style="width:300px;margin-left:20px" />
      <Button @click="handleSearch"
              type="primary"
              style="margin-left:10px">搜索</Button>
      <Button @click="handleReset"
              type="default"
              style="margin-left:10px">重置</Button>
    </Row>
    <Row>
      <Table border
             size="small"
             :columns="columns5"
             :data="data5"
             style="margin-top:20px"></Table>
      <Row type="flex"
           justify="end"
           class="page">
        <Page :current="searchForm.page"
              :total="total"
              :page-size="searchForm.limit"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer></Page>
      </Row>
    </Row>

    <!-- 选择渠道模态窗 -->
    <Modal v-model="modal1"
           title="选择渠道">
      <RadioGroup vertical
                  size="large"
                  @on-change="handlePay"
                  v-model="form.pay_channel">
        <div class="selectOne">
          <Radio label="1"
                 size="large">
            <img src="../../../assets/images/wx.png"
                 style="width:25px;height:25px" />
            <span>微信</span>
          </Radio>
        </div>
        <div class="selectOne">
          <Radio label="2"
                 size="large">
            <img src="../../../assets/images/zfb.png"
                 style="width:25px;height:25px" />
            <span>支付宝</span>
          </Radio>
        </div>
      </RadioGroup>
      <!-- 模态窗底部 -->
      <div slot="footer">
        <Button type="default"
                @click="cancel">取消</Button>
        <Button type="primary"
                @click="ok">确认</Button>
      </div>
    </Modal>
    <!-- 2 -->
    <Modal v-model="modal2"
           title
           @on-ok="ok2"
           @on-cancel="cancel2"
           footer-hide
           id="modal2">
      <img :src="imgUrl"
           style="display:block;width:230px;margin:20px auto" />
    </Modal>
    <Modal v-model="modal3"
           title="是否确认拒绝"
           @on-ok="ok3"
           @on-cancel="cancel3"></Modal>
  </div>
</template>

<script>
import {
  withdrawDepositList,
  withdrawRemit,
  withdrawRefuse,
  orderSearchList
} from '@/api/mc/vip.js'

export default {
  data () {
    return {
      searchForm: {
        // 搜索框初始化对象
        section: {
          start_time: null,
          end_time: null
        },
        nickname: null,
        filter: { status: null }, // 双向绑定搜索数据
        sort: { id: 'desc' }, // 倒序
        page: 1,
        limit: 10
      },
      limit: null,
      // 订单创建时间
      selectDate: '',
      form: {
        pay_channel: null
      },
      form2: {},
      total: 0,
      order_time: '',
      level: [
        {
          value: '0',
          label: '已取消'
        },
        {
          value: '1',
          label: '申请中'
        },
        {
          value: '2',
          label: '已打款'
        },
        {
          value: '3',
          label: '已拒绝'
        }
      ],
      modal1: false,
      modal2: false,
      modal3: false,
      imgUrl: '', // 付款码图片
      data: [],
      statusName: '',
      columns5: [
        {
          title: 'ID',
          key: 'id',
          width: '70',
          align: 'center'
        },
        {
          title: '昵称',
          key: 'nickname',
          width: '130',
          align: 'center',
          render (h, params) {
            const { nickname } = params.row.relevance_we_chat_user
            return h('p', params.row.relevance_we_chat_user.nickname)
          }
        },
        {
          title: '提现金额',
          key: 'amount',
          align: 'center',
          width: '100'
        },
        {
          title: '支付渠道',
          key: 'pay_channel',
          width: '100',
          align: 'center'
        },
        {
          title: '申请时间',
          key: 'apply_time',
          align: 'center'
        },
        {
          title: '打款时间',
          key: 'confirm_time',
          align: 'center'
        },
        {
          title: '拒绝时间',
          key: 'refuse_time',
          align: 'center'
        },
        {
          title: '取消时间',
          key: 'cancel_time',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          width: '80',
          align: 'center',
          render (h, params) {
            if (params.row.status == 0) {
              this.statusName = '已取消'
              return h('p', this.statusName)
            } else if (params.row.status == 1) {
              this.statusName = '申请中'
              return h('p', this.statusName)
            } else if (params.row.status == 2) {
              this.statusName = '已打款'
              return h('p', this.statusName)
            } else if (params.row.status == 3) {
              this.statusName = '已拒绝'
              return h('p', this.statusName)
            }
          }
        },
        {
          title: '微信付款码',
          key: 'wx_code',
          align: 'center',
          width: '120',
          render: (h, params) => {
            return h('div', [
              h('img', {
                style: {
                  weight: '50px',
                  height: '50px'
                },
                attrs: {
                  src: params.row.relevance_we_chat_user.wx_code
                },
                on: {
                  click: e => {
                    this.modal2 = true
                    this.bigImg(e)
                  }
                }
              })
            ])
          }
        },
        {
          title: '支付宝付款码',
          key: 'zfb_code',
          align: 'center',
          width: '130',
          render: (h, params) => {
            return h('div', [
              h('img', {
                style: {
                  weight: '50px',
                  height: '50px'
                },
                attrs: {
                  src: params.row.relevance_we_chat_user.zfb_code
                },
                on: {
                  click: e => {
                    this.modal2 = true
                    this.bigImg(e)
                  }
                }
              })
            ])
          }
        },
        {
          title: '操作',
          key: 'option',
          align: 'center',
          render: (h, params) => {
            if (params.row.status == 1) {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    style: {
                      marginRight: '2px',
                      width: '55px',
                      textAlign: 'center'
                    },
                    on: {
                      click: () => {
                        this.modal1 = true
                        this.edit(params.row)
                      }
                    }
                  },
                  '打款'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      width: '55px'
                    },
                    on: {
                      click: () => {
                        this.modal3 = true
                        this.edit(params.row)
                        // this.handleWithdrawRefuse()
                      }
                    }
                  },
                  '拒绝'
                )
              ])
            }
          }
        }
      ],
      data5: [],
      nicknameTemp: '',
      rowTemp: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    bigImg (e) {
      this.imgUrl = e.target.src
    },
    // 点击打款弹出模态框
    // 点击确定
    ok () {
      // 同意打款
      if (this.form.pay_channel) {
        withdrawRemit(this.rowTemp.id, {
          pay_channel: this.form.pay_channel
        }).then(res => {
          // 刷新列表
          this.getList()
          this.$Message.success('打款成功')
          this.modal1 = false
          this.form.pay_channel = null
        })
      } else {
        this.$Message.info('请选择打款渠道')
      }
    },
    // 点击取消
    cancel () {
      this.modal1 = false
    },
    ok2 () { },
    cancel2 () { },
    ok3 () {
      this.handleWithdrawRefuse()
    },
    cancel3 () { },
    // 点击拒绝打款
    handleWithdrawRefuse () {
      withdrawRefuse(this.rowTemp.id)
        .then(res => {
          this.getList()
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 日期选择
    selectDateRange (e) {
      this.searchForm.section.start_time = e[0]
      this.searchForm.section.end_time = e[1] + ' 23:59:59'
    },
    // 选择状态
    handleState (level) {
      console.log('选的的状态', level)
      this.searchForm.filter.status = level
    },
    // 搜索
    handleSearch (e) {
      this.searchForm.page = 1
      this.searchForm.sort = {
        id: 'desc' // 倒序
      }
      this.getList()
    },
    // 重置
    handleReset () {
      this.selectDate = ''
      this.searchForm = {
        // 搜索框初始化对象
        section: {
          start_time: null,
          end_time: null
        },
        nickname: null,
        filter: { status: null }, // 双向绑定搜索数据
        sort: { id: 'desc' }
      }
      this.searchForm.page = 1
      this.searchForm.limit = this.limit
      console.log('searchForm', this.searchForm)

      this.getList()
    },
    // 选择当前行
    edit (e) {
      this.rowTemp = e
    },
    // 获取数据
    getList () {
      this.data5 = []
      withdrawDepositList(this.searchForm)
        .then(res => {
          this.data5 = []
          console.log('res=', res)
          res.data.map(v => {
            this.data5.push(v)
          })
          this.total = res.meta.pagination.total
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 选择支付方式
    handlePay (e) { },
    // 分页
    changePage (v) {
      this.searchForm.page = v
      this.getList()
      // console.log('当前页码', this.searchForm.page)
    },
    changePageSize (v) {
      this.limit = v
      this.searchForm.limit = v
      this.getList()
    }
  }
}
</script>
<style>
.selectOne {
  width: 200px;
  height: 40px;
  display: flex !important;
  align-items: center;
  line-height: 50px;
}
.ivu-radio-group-vertical .ivu-radio-wrapper {
  display: flex;
  align-items: center;
}
#modal2 {
  width: 200px;
  height: 200px;
  position: relative;
  clear: both;
  overflow: hidden;
}
</style>
